{% assign list_direction = Model.ContentItem.Content.SectionPanel.ListDirection.Text %}
{% if Model.ContentItem | user_can_view %}
<article id="{{ Model.ContentItem | display_text | slugify }}" class="{% if Model.ContentItem.Content.SectionPanel.Size.Text %}{{ Model.ContentItem.Content.SectionPanel.Size.Text }}{% else %}column{% endif %} my-3 d-flex flex-column flex-fill">
  <div class="section-panel">
    <header class="d-flex flex-column justify-content-center text-center mb-5">
      <i class="m-2 fa-3x {{ Model.ContentItem.Content.SectionPanel.Icon.Text }}"></i>
      <h2>{{ Model.ContentItem.Content.SectionPanel.Title.Text }}</h2>
      <p>{{ Model.ContentItem.Content.SectionPanel.Description.Text }}</p>
    </header>
    <nav>
      <ul class="row {{ list_direction }} flex-fill{% unless list_direction == 'is-vertical-list' %} justify-content-around{% endunless %}">
      {% for item in Model.ContentItem.Content.Links.ContentItems %}
        {% if item.SectionPanelLink.HeroHighlight.Value == "true" %}
          {% block "script", at:"Foot" %}
              $("#hero-highlights").append('<li id="{{ item.SectionPanelLink.Name.Text | slugify }}-link" class="nav-item m-2"><a class="btn btn-lg btn-primary is-rounded" href="#{{ Model.ContentItem | display_text | slugify }}">{{ item.SectionPanelLink.Name.Text }}</a></li>');
              $("#{{ item.SectionPanelLink.Name.Text | slugify }}-link").click(function() { 
                setTimeout(function() { $("#{{ item.SectionPanelLink.Name.Text | slugify }}").focus(); }, 100);
              });
          {% endblock %}
        {% endif %}
        <li class="{% if list_direction == 'is-vertical-list' %}d-flex{% else %}col-4{% endif %}">
          <a id="{{ item.SectionPanelLink.Name.Text | slugify }}" {% if item.SectionPanelLink.ModalID.Text %}data-toggle="modal" data-target="#{{item.SectionPanelLink.ModalID.Text}}" href="#"{% else %}href="{{ item.SectionPanelLink.Url.Text }}" target="_blank" aria-label="{{ 'Open' | t }} {{ item.SectionPanelLink.Name.Text }} {{ 'in a new tab' | t }}"{% endif %} aria-label="{{ item.SectionPanelLink.Name.Text }}" class="d-flex flex-grow-1 {% if list_direction == 'is-horizontal-list' %}justify-content-center{% endif %}">
            <div class="section-panel-link d-flex {% if list_direction == 'is-horizontal-list' %}px-2{% endif %}">
              <div class="section-panel-link-icon text-primary mb-2">
                {% if item.SectionPanelLink.Image.Paths.first != null %}
                  <img src="{{ item.SectionPanelLink.Image.Paths.first | asset_url }}" aria-hidden="true" />
                {% else %}
                  <i class="fa-2x {{ item.SectionPanelLink.Icon.Text }}"></i>
                {% endif %}
              </div>
              <div>
                <h3>{{ item.SectionPanelLink.Name.Text }} {% if item.SectionPanelLink.HeroHighlight.Value == true %}<i class="fas fa-star ml-1"></i>{% endif %}</h3>
                <p class="text-secondary">{{ item.SectionPanelLink.Description.Text }}</p>
              </div>
            </div>
          </a>
          {% if item.Actions.ContentItems != null %}
            <div class="nav-item dropdown">
              <a class="btn btn-sm btn-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right">
                {% for action in item.Actions.ContentItems %}
                  {% if action.LinkMenuItemPart.Name contains "Kubeflow" %}
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#bonus-action-modal" aria-label="{{ action.LinkMenuItemPart.Name }} {{ 'in a new tab' | t }}">{{ "Request a Kubeflow namespace" | t }}</a>
                    {{ "ModalBonusAction" | shape_new: endpoint: action.LinkMenuItemPart.Url | shape_render }}
                  {% else %}
                    <a class="dropdown-item" href="{{ action.LinkMenuItemPart.Url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ action.LinkMenuItemPart.Name }} {{ 'in a new tab' | t }}">{{ action.LinkMenuItemPart.Name }}</a>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
      </ul>
    </nav>
  </div>
</article>
{% endif %}
